<template>
  <div class="radio-list">
    <h4>{{ title }}</h4>
    <span class="iconfont icon-arrow_right_fat"></span>
    <SelectCard
      @click=";(radioAtcive = item.id), searchStore.QueryAsk(id, item.id, item.tagName)"
      :isActive="item.id == radioAtcive"
      v-for="item in data"
      :key="item.id"
    >
      <span>{{ item.tagName }}</span>
    </SelectCard>
  </div>
</template>

<script>
import { ref } from 'vue'

import SelectCard from '../Card/SelectCard.vue'

import { useSearchStore } from '@/stores/search'

export default {
  name: 'ToRadio',
  props: {
    data: {
      default: []
    },
    title: {
      default: ''
    },
    id: {
      default: null
    }
  },
  components: {
    SelectCard
  },
  setup() {
    const searchStore = useSearchStore()
    const radioAtcive = ref(0)

    return {
      radioAtcive,
      searchStore
    }
  }
}
</script>

<style lang="scss" scoped>
.radio-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  h4 {
    user-select: none;
    color: $font;
  }
  .icon-arrow_right_fat {
    font-size: 8px;
    color: $font_unactive;
  }
  span {
    user-select: none;
  }
}
</style>
